

<!-- dialog展示组件 -->
<template>
   <div class='component_wrappers'>
    <el-dialog
        :modal-append-to-body='true' 
        :append-to-body='true'
        :title="dialog_title"
        @close="handleClose"
        :visible.sync="showHide"
        class="dds"
    >   
        <div v-if="chongshi">
            <el-input
                ref="fuzhi1"
                type="textarea"
                :rows="21"
                placeholder="请输入内容"
                v-model="details"
                show-word-limit
            ></el-input>

        </div>
        <div v-else>
            <pre  ref="fuzhi" > {{details}} </pre>
        </div>

        <span slot="footer" class="dialog-footer">
            <el-button @click="handleClose">取 消</el-button>
            <el-button type="primary"  @click="fuzhi">复 制</el-button>
            <el-button type="primary" v-hasPermi="['log:fail:retry']" @click="retry">重试</el-button>
        </span>

</el-dialog>
   </div>
</template>

<script>
import copy from 'copy-to-clipboard';
export default {
    name: 'customDialog', 
    props: {
        info: {
            type: Object,
        },
        show_Hide:{
            type: Boolean
        },
    },
    data() {
        return {
            showHide:false,
            details:[],
            dialog_title:'',
            chongshi:false,
        };
    },
    watch: {
        info:{
            handler(newInfo, oldInfo){
               //  this.details = JSON.stringify(newInfo.details,null, 4);
               console.log(newInfo);
                this.details = newInfo.details
                this.dialog_title = newInfo.title;
                this.chongshi = newInfo.chongshi;
            },

            deep: true
        },
        show_Hide(val){
            this.showHide = val;
        },
    },
    computed: {
    },
    methods: {

      handleClose() {
            this.$emit('modal_dialog');
      },
      fuzhi(){
         //  let ens , ens1
         //  if (this.$refs.fuzhi) {
         //       ens =  this.$refs.fuzhi.innerHTML
               
         //   }else if(this.$refs.fuzhi1){
         //        ens1 =  this.$refs.fuzhi1

         //   }
         //    if(ens){
         //        copy(ens);
         //        this.$message({
         //            message: '复制成功',
         //            type: 'success'
         //        })
         //    }else if(ens1){
         //        copy(this.details);
         //        this.$message({
         //            message: '复制成功',
         //            type: 'success'
         //        })
         //    }
      },
      retry(){
          this.$emit('add_retry',this.details);
      }
    },
    mounted() {
        
    },
        created() {
        
    },
    created() {
            // let list = JSON.stringify(this.tableData,null, 4)
            // this.textarea = list
        this.showHide = this.show_Hide;
        console.log(this.info);
        if(this.info){
            let {dialog_title,details=[],chongshi=false } = this.info;
            this.dialog_title =dialog_title
            console.log(details);
            console.log(JSON.stringify(details,null, 4));
            
            if (details && details.length>0) {
               this.details = details
               
            }
            this.chongshi = chongshi
        };

        // if(this.common_label_width){
        //     this.label_width = `width: ${this.common_label_width}`;
        // };
    },
}
</script>

<style lang='less'>
.component_wrappers{
    color:red
}
.dds>.el-dialog>.el-dialog__body{
    height: calc(100vh - 400px);
    overflow:auto;
}
</style>